<template>
  <div class="bottom">
    <div class="panel">
      <el-row>
        <el-col>
          <div class="author">
            <el-row :gutter="20" justify="center">
              <el-col span="4"><span class="info-item"><span class="label">网站作者：</span>闪光灯</span></el-col>
              <el-col span="1"><span class="vertical">|</span></el-col>
              <el-col span="4"><span class="info-item"><span class="label">QQ：</span>2860253651</span></el-col>
              <el-col span="1"><span class="vertical">|</span></el-col>
              <el-col span="4"><span class="info-item"><span class="label">邮箱：</span>2860253651@qq.com</span></el-col>
              <el-col span="1"><span class="vertical">|</span></el-col>
              <el-col span="4"><span class="info-item"><span class="label">有事可联系QQ</span></span></el-col>
              <el-col span="1"><span class="vertical">|</span></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <p><span class="label">ICP备案号：</span>
        <el-link type="success" :underline="false" target="_blank" href="https://beian.miit.gov.cn">湘ICP备2022014091号
        </el-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottom"
}
</script>

<style scoped lang="scss">
.bottom {
  border-radius: 5px;
  box-shadow: $panel-shadow;
  box-sizing: content-box;
  margin-top: 30px;
  background-color: #e1eee7;
  padding: 20px 0 10px 0;

  .panel {
    text-align: center;

    .author {
      overflow: hidden;
      .vertical {
        color: $nav-btn-blog-back;
      }

      .info-item {
        .label {
          font-size: 15px;
          color: $theme-color;
        }

        color: #8092a0;
      }
    }

    p {
      line-height: 12px;
    }

    .label {
      font-size: 13px;
      color: white;
    }
  }
}
</style>
